<template>
  <div id="main">
    <el-card shadow="hover" class="mgb20" style="height:252px;">
      <div class="user-info">
        <img src="../../assets/img/img.jpg" class="user-avator" alt/>
        <div class="user-info-cont">
          <div class="user-info-name">{{ name }}</div>
          <div>{{ role }}</div>
        </div>
      </div>
      <h3>清河海风溶溶月色，共赏之人，就在身侧~</h3>
    </el-card>
    <el-card shadow="hover" style="height:252px;">
      <div slot="header" class="clearfix">
        <span>语言详情</span>
      </div>
      Vue
      <el-progress :percentage="71.3" color="#42b983"></el-progress>
      JavaScript
      <el-progress :percentage="24.1" color="#f1e05a"></el-progress>
      CSS
      <el-progress :percentage="13.7"></el-progress>
      HTML
      <el-progress :percentage="5.9" color="#f56c6c"></el-progress>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { UserType } from '@/utils/auth'

export default {
  name: 'dashboard',
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ]),
    role() {
      const role = this.roles[0]
      if (role === UserType.USER.des) {
        return '普通用户'
      } else if (role === UserType.ADMIN.des) {
        return '管理员'
      } else if (role === UserType.SUPER_ADMIN.des) {
        return '超级管理员'
      } else {
        return 'NULL'
      }
    }
  }
}
</script>


<style scoped>
#main {
  margin: 0 auto;
  width: 60%;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}


.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}

</style>
